import { Link } from "@tanstack/react-router";
import { ArrowRightIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";

export function NotFound() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <div className="flex max-w-xl flex-col items-center justify-center gap-8">
        <div className="flex h-6 items-center space-x-4 text-sm">
          <p>404</p>
          <Separator orientation="vertical" />
          <p>Page not found</p>
        </div>
        <Button variant="link" className="group">
          <Link to="/" className="flex items-center gap-2">
            <p>Go home</p>
            <ArrowRightIcon
              className="-me-1 size-4 opacity-60 transition-transform group-hover:translate-x-0.5"
              aria-hidden="true"
            />
          </Link>
        </Button>
      </div>
    </div>
  );
}
